<template>
  <div class="sticky top-20 flex flex-col gap-4">
    <h3 class="text-lg font-bold text-text-primary mb-2">相关推荐</h3>

    <!-- 推荐电影列表 -->
    <div class="space-y-3">
      <div
        v-for="movie in movies"
        :key="movie.id"
        class="relative group rounded-xl overflow-hidden shadow-lg bg-background-800 cursor-pointer w-full h-32 flex hover:-translate-y-1 hover:border-primary-500/30 hover:shadow-xl transition-all duration-normal border border-background-700"
        @click="goDetail(movie.id)"
      >
        <!-- 电影封面 -->
        <div class="w-24 h-full flex-shrink-0">
          <LazyImage
            :src="movie.coverUrl"
            :alt="movie.title"
            class="w-full h-full"
            image-class="w-full h-full object-cover"
            placeholder-class="w-full h-full bg-gradient-to-br from-background-700 to-background-800 animate-pulse"
          />
        </div>

        <!-- 电影信息 -->
        <div class="flex-1 flex flex-col justify-end bg-gradient-to-t from-background-900/80 to-transparent p-3">
          <div class="text-sm font-bold text-text-primary truncate">{{ movie.title }}</div>
          <div class="flex flex-wrap gap-1 mt-1">
            <span
              v-for="tag in (movie.tags || []).slice(0, 2)"
              :key="tag"
              class="bg-background-700/50 text-xs text-text-secondary px-2 py-0.5 rounded-full border border-background-600/30 no-wrap flex-shrink-0"
            >
              {{ tag }}
            </span>
            <span v-if="(movie.tags || []).length > 2" class="text-xs text-text-muted px-2 py-0.5 no-wrap flex-shrink-0">
              +{{ (movie.tags || []).length - 2 }}
            </span>
          </div>
        </div>

        <!-- 评分角标 -->
        <div
          class="absolute top-2 left-2 bg-background-900/80 text-text-primary text-xs px-2 py-1 rounded-lg backdrop-blur-sm border border-background-700/50"
        >
          ⭐ {{ movie.rating }}
        </div>

        <!-- AI标识（受全局偏好控制） -->
        <div
          v-if="movie.isAi && showAiLabel"
          class="absolute top-2 right-2"
        >
          <span class="ai-badge">AI</span>
        </div>

        <!-- 播放按钮覆盖层 -->
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-normal bg-background-900/20 rounded-xl pointer-events-none">
          <div class="glass rounded-full p-3">
            <svg class="w-8 h-8 text-text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <polygon points="9.5,7.5 16.5,12 9.5,16.5" fill="currentColor"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="mt-4 text-center">
      <div class="text-text-muted text-sm">加载推荐中...</div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="movies.length === 0" class="mt-4 text-center">
      <div class="text-text-muted text-sm">暂无相关推荐</div>
    </div>

    <!-- 查看更多按钮 -->
    <div v-else class="mt-4">
      <button
        class="btn-secondary w-full py-2 text-sm"
      >
        查看更多推荐
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { computed } from 'vue'
  import { LazyImage } from '../ui'
  import type { Movie } from '../../composables/movies'
  import { useUiStore } from '../../store/useUiStore'

  const props = defineProps<{
    movies: Movie[]
    isLoading?: boolean
  }>()

  const router = useRouter()
  const uiStore = useUiStore()
  const showAiLabel = computed(() => uiStore.showAiLabel)

  const goDetail = (id: number) => {
    console.log('RecommendSidebar: 点击电影卡片，ID:', id)
    console.log('当前路由:', router.currentRoute.value.path)
    
    // 跳转到新页面
    router.push({ name: 'MovieDetail', params: { id } }).then(() => {
      console.log('路由跳转完成，新路由:', router.currentRoute.value.path)
      // 确保滚动到顶部 - 针对MainLayout中的滚动容器
      const mainContent = document.querySelector('main')
      if (mainContent) {
        mainContent.scrollTop = 0
      } else {
        window.scrollTo(0, 0)
      }
    }).catch((error) => {
      console.error('路由跳转失败:', error)
    })
  }
</script>

<style scoped>
  /* 防止标签换行 */
  .no-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
  }
</style>
